<template>
  <div class="home-c" style="width:100%; height:400px; padding: 30px;">
    <QuillEditor theme="snow" style="width:100%; height:100%; background-color: #f8f8f8;" :toolbar="toolbarArr" ref="editor" />
    <div style="margin-top:20px;">
       <el-button type="primary" @click="getEditorFun">保存</el-button>
    </div>
  </div>
  <div class="echarts" :id="id" :style="{
        width: width,
        height: height,
    }"></div>
</template>

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { ref } from 'vue';
    let toolbarArr = [
      { 'header': [1, 2, 3, 4, 5, 6, false] },
      'bold', 
      'italic', 
      'underline',
      'strike',
      { 'color': [] },
      { 'background': [] },
      { 'align': [] },
      { 'list': 'ordered'},
      { 'list': 'bullet' },
      'link',
      'image',
      // 'video',
      'clean'
    ]
    let editor = ref(null); 

 const getEditorFun = ()=>{
   let str = editor.value.getHTML()
   console.log(str);
 }

</script>

<style>
.home-c{
  box-sizing: border-box;
}
</style>